<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,initial-scale=1.0"/>
    <title>牛道人</title>
    <link rel="stylesheet" type="text/css" href="css/styleUI.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="page" class="uf uf-ver">
    <div id="header" class="uf">
        <a href="index.html" class="uf-f uf uf-ac uf-pc nav">牛观点</a>
        <a href="liveVideo.html" class="uf-f uf uf-ac uf-pc nav active">看直播</a>
        <a href="contact.html" class="uf-f uf uf-ac uf-pc nav">找老牛</a>
    </div>
    <div id="navigation" class="uf uf-ac uf-pja">
        <a href="liveText.html" class="nav">文字直播</a>
        <a href="liveVideo.html" class="nav active">视频复播</a>
    </div>

    <div id="container" class="uf-f u-scroll secondBg">

        <div class="aVideo">
            <div class="title">绝地反击</div>
            <div class="videoDiv">
                <video class="videoPic.jpg" src="" onplay="videoPlay(this)" data-id="视频id234"
                       poster="image/static/videoPic.jpg"
                       x-webkit-airplay="true"
                       webkit-playsinline="true"
                       playsinline="true"
                       x5-video-player-type="h5"
                       x5-video-player-fullscreen="true" controls="controls"></video>
            </div>
            <div class="uf uf-ac census uf-pj">
                <div class="txt">2017-06-08</div>
                <div class="txt">作者：牛道人</div>
                <div class="ub ub-ac">
                    <div class="icon-eye"></div>
                    <div class="sl">518</div>
                </div>
            </div>
        </div>

    </div>
</div>
<script>
    //视频播放的回调函数
    function videoPlay(e) {
        var videoId = e.getAttribute("data-id");

        //一段时间间隔内不触发
        var durTime = 1000 * 60 * 30;//毫秒
        var sessionKey = "videoPlay" + videoId;
        if (sessionStorage.getItem(sessionKey) && Date.parse(new Date()) - sessionStorage.getItem(sessionKey) < durTime)return;
        sessionStorage.setItem(sessionKey, Date.parse(new Date()));

        console.log(videoId);
    }
</script>

</body>
</html>